<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>类别选择Demo（多个）</title>
		<link rel="stylesheet" href="css/style.css">

		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/index.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<style>
			body {
				padding: 20px;
			}
			
			.select-res span {
				display: inline-block;
				width: 180px;
				height: 14px;
				line-height: 14px;
				padding: 7px 15px 7px 5px;
				border: solid 1px #c0c0c0;
				background: url(images/select_box_bg.gif) no-repeat 190px center;
				cursor: pointer;
				color: #c2c2c2;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.select-res p {
				position: relative;
				width: 200px;
				height: 28px;
				line-height: 28px;
				border-bottom: dashed 1px #c0c0c0;
				padding: 0 5px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				padding-right: 20px;
			}
			
			.select-res a {
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				width: 28px;
				height: 28px;
				background: url(images/close_btn.jpg) no-repeat center;
				cursor: pointer;
			}
			
			.select-res input {
				width: 172px;
				height: 14px;
				line-height: 14px;
				margin-left: 4px;
				padding: 7px 5px;
				border: solid 1px #c0c0c0;
				color: #2c2c2c;
			}
			
			.select-res span.selected {
				color: #626262;
			}
			
			.select-box {
				border: solid 1px #fd8340;
				width: 700px;
				height: 220px;
				padding: 20px 20px 10px;
				position: absolute;
				display: none;
				z-index: 5;
				background: #fff;
			}
			
			.select-box .close-btn {
				position: absolute;
				right: 5px;
				top: 5px;
				cursor: pointer;
			}
			
			.select-box .wrap {
				height: 200px;
				border: solid 1px #ddd;
				margin-top: 5px;
				width: 663px;
			}
			
			.select-box ul {
				float: left;
				width: 220px;
				height: 200px;
				overflow-y: scroll;
			}
			
			.select-box ul li {
				height: 25px;
				line-height: 25px;
				padding: 0 10px;
				background: url(images/arr.gif) no-repeat 190px center;
				color: #626262;
				cursor: pointer;
			}
			
			.select-box ul li.selected {
				background: url(images/arr_selected.gif) no-repeat 190px center #fd8340;
				color: #fff;
			}
			
			.drop {
				margin-top: 50px;
				margin-left: 0px;
			}
			
			.drop>div {
				margin-right: 10px;
				float: left;
			}
			
			#lmsx {
				margin-bottom: 15px;
				min-height: 35px;
				left: 0px;
			}
			
			#configbox {
				margin-bottom: 15px;
				min-height: 35px;
				left: 0px;
			}
			
			.shuxinselect {
				padding: 4px 4px;
				height: 30px;
				line-height: 30px;
			}
			
			.Add_p_s {
				width: 460px;
				position: relative;
				min-height: 35px;
				float: left;
				margin-bottom: 15px;
			}
			
			.form-label col-2 {
				line-height: 35px;
				width: 120px;
				float: left;
				text-align: right;
			}
			
			#aa {
				float: left;
				line-height: 30px;
				list-style: none;
				margin-right: 10px;
			}
			
			.clear {
				clear: both;
			}
		</style>
	</head>

	<body>

		<div id="">

			<div id="">

				<div style="width: 800px;height: 50px; ">
					<div id="" style=" float: left;">

						<input type="text" id="leibie" style="width: 250px; float: left;" placeholder="请输入需要添加的类别" class="layui-input" />

						<button class="layui-btn" onclick="tianjia()"><i class="layui-icon"></i>添加</button>
					</div>

					<div id="" style=" float: right;">
						<input type="text" id="neirong" style="width: 250px; float: left;" placeholder="请输入需要修改的内容" class="layui-input" />

						<button class="layui-btn" onclick="xiugai()" style="width: 85px;">修改</button>
					</div>

				</div>

				<div id="" style="height: 50px;">

					<button class="layui-btn layui-btn-danger" onclick="shanchu()"><i class="layui-icon"></i>删除</button>
				</div>

			</div>

			<div class="clearfix cl">

				<div class="select-res">
					<span>请选择您主营的品类名称（多选）</span>
				</div>
				<div class="select-box">
					<span class="close-btn">
                       <img src="images/close_btn.jpg" />
                    </span>
					<div class="wrap">
						<ul class="first"></ul>
						<ul class="second"></ul>
						<ul class="third"></ul>
					</div>

				</div>
			</div>

			<div id="" style="position: absolute;top: 420px;width: 300px;">
				<div style="width: 800px;height: 50px; ">

					<input type="text" id="attribute" style="width: 250px; float: left;margin-right: 20px;" placeholder="请输入需要添加的属性" class="layui-input" />

					<input type="text" id="attibutedetails" style="width: 250px; float: left;" placeholder="请输入需要添加的属性详情" class="layui-input" />

					<button class="layui-btn" onclick="tianjiaattribute()" style="width: 85px;">添加</button>

				</div>
				<div style="width: 225%;">
					<label class="form-label col-2"><span class="c-red" style="color: red;">*</span>类目属性：</label><br />

					<ul id="lmsx" style="display: inline-block; border: 1px solid #e2dada; position: relative; width: 90%; ">

					</ul>

				</div>
				<div style="width: 800px;height: 50px; ">

					<input type="text" id="configname" style="width: 250px; float: left; margin-right: 20px;" placeholder="请输入需要添加的配置" class="layui-input" />

					<input type="text" id="configdetails" style="width: 250px; float: left;" placeholder="请输入需要添加的配置详情" class="layui-input" />

					<button class="layui-btn" onclick="tianjiaconfig()" style="width: 85px;">添加</button>

				</div>
				<div style="width: 800px;height: 50px; ">
					<label class="form-label col-2"><span class="c-red" style="color: red;">*</span>销售信息：</label><br />

					<ul id="configbox" style="display: inline-block; border: 1px solid #e2dada; position: relative; width: 90%; ">
						<script type="text/javascript" src="js/getSetSkuVals.js"></script>
					</ul>

				</div>

			</div>

		</div>

	</body>

	<script>
		var user = ""
		$.ajax({
			type: "get",
			url: "http://localhost:16111/goods/selgoodsleimu",
			async: true,
			data: {},
			success: function(data) {
				//alert(data.size) 

				user = eval('(' + JSON.stringify(data) + ')')

			}
		});

		var l1 = 0,
			l2 = 0;
		var cname1, cname2, cname3;
		var cid1, cid2, cid3;
		var canClick = !0;
		var canClose = !1;
		$('.select-box').css({
			left: $('.select-res').offset().left,
			top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
		});
		$('span', $('.select-res')).on('click', function() {
			$('.select-box').show();
			if(canClick) {
				$('ul', $('.select-box')).html('');
				fillData();
				canClick = !1;
			}
		});
		$('span', $('.select-box')).on("click", function() {
			// canClose ? $('.select-box').hide() : alert('请选择下级品类！');
			canClick = !0;
		});

		$('.select-res').on('click', 'a', function() {
			$(this).parent().remove();
			$('.select-box').css({
				top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
			});
		})

		$('ul.first', $('.select-box')).on('click', 'li', function() {
			$(this).addClass('selected').siblings().removeClass('selected');
			$('ul.third').html('');
			fillData($(this).index());
			l1 = $(this).index();
			cname1 = $(this).text();
			cid1 = $(this).attr('val');
			canClose = !1;
			$('input.cid', $('.select-res')).val(cid1);
			$('input.cname', $('.select-res')).val(cname1);
		});
		$('ul.second', $('.select-box')).on('click', 'li', function() {
			$(this).addClass('selected').siblings().removeClass('selected');
			fillData(l1, $(this).index());
			l2 = $(this).index();
			cname2 = $(this).text();
			cid2 = $(this).attr('val');
			canClose = !1;
			$('input.cid', $('.select-res')).val(cid1 + ',' + cid2);
			$('input.cname', $('.select-res')).val(cname1 + ',' + cname2);
		});
		$('ul.third', $('.select-box')).on('click', 'li', function() {
			$(this).addClass('selected').siblings().removeClass('selected');
			cname3 = $(this).text();
			cid3 = $(this).attr('val');
			canClose = !0;
			var hasExist = !1;
			$('.select-res').find("p").each(function() {
				if($(this).text().split(' > ')[2] == cname3) hasExist = !0;
			})
			//  hasExist ? alert('所选品类已被添加！') : $('.select-res').append('<p>' + cname1 + ' > ' + cname2 + ' > ' + cname3 + '<a></a><input type="hidden" value="' + cid1 + ',' + cid2 + ',' + cid3 + '" name="cid[]" /><input type="hidden" value="' + cname1 + ',' + cname2 + ',' + cname3 + '" name="cname[]" /></p>');
			$('.select-box').css({
				top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
			});
			$('input.cid', $('.select-res')).val(cid1 + ',' + cid2 + ',' + cid3);
			$('input.cname', $('.select-res')).val(cname1 + ',' + cname2 + ',' + cname3);

			//选择商品类目的三个下拉列表查询事件
			$(function() {
				$.ajax({
					type: "get",
					url: "http://localhost:16111/goods/selgoodsattribute",
					async: true,
					data: {
						category_id: cid3
					},
					success: function(data) {

						var a = eval('(' + JSON.stringify(data.data[0]) + ')')
						var str = "";
						shuxinid = new Array();

						for(var i in a) {
							//a.data[i].id   属性id

							shuxinid.push(a[i].id);

							if(a[i].child == "") {
								str += '<li ><div class="Add_p_s"><label class="form-label col-2"><span class="c-red" style="color: red;">*</span>' +
									a[i].attribute +
									'：' +
									'</label>	<div><input type="text" class="input-text" value="" placeholder="" id="shuxinvalue" name="shuxinvalue"></div>	</div></li>	'

							} else {
								str += '<li><div class="Add_p_s"><label style="float: left;"><span class="c-red" style="color: red;">*</span>' +
									a[i].attribute +
									'：' +
									'</label>	<div><select id="selector" class = "shuxinselect" >';

								for(var b in a[i].child) {
									str += "<option value=" + a[i].child[b].id + ">" + a[i].child[b].details + "</option>";
								}
								str += ' </select></div></div></li>';
							}

						}
						$("#lmsx").html(str);

						var str2 = "";
						var config = eval('(' + JSON.stringify(data.data[1]) + ')')

						allconfigid = new Array();

						for(var i in config) {

							allconfigid.push(config[i].id);

							str2 += '<li><ul><li id="aa" style="display: list-item;text-align: -webkit-match-parent;" is_required="1" propid=' + i + '  sku-type-name="' + config[i].configuration_type + '"><em class="c-red" style="color: red;">*</em>' +
								config[i].configuration_type +
								'：</li></ul><ul style="margin-left: 18px;">'

							for(var a in config[i].child) {
								str2 += '<li id="aa"><label><input type="checkbox" class="sku_value" propvalid=' + i + ' value="' + config[i].child[a].config_details + '" />' +
									config[i].child[a].config_details +
									'</label></li>'
							}
							str2 += '</ul></li><div class="clear"></div>'
						}

						str2 += '<div id="skuTable"></div>'
						$("#configbox").html(str2);
					}
				});
			})
		});

		//填充级联数据

		function fillData(l1, l2) {
			var temp_html = "";
			if(typeof(user.data) != "undefined" && arguments.length == 0) {
				$.each(user.data, function(i, user) {
					temp_html += '<li onclick="yj(' + user.id + ')" val="' + user.id + '">' + user.name + '</li>';
				});
			} else if(user.data[l1].child != "undefined" && arguments.length == 1) {
				$.each(user.data[l1].child, function(i, a) {
					temp_html += '<li onclick="ej(' + a.id + ')" val="' + a.id + '">' + a.name + '</li>';
				});
			} else if(user.data[l1].child[l2].child != "undefined" && arguments.length == 2) {
				$.each(user.data[l1].child[l2].child, function(i, pro) {
					temp_html += '<li onclick="sj(' + pro.id + ')" val="' + pro.id + '">' + pro.name + '</li>';
				});
			}
			$('.select-box ul:eq(' + arguments.length + ')').html(temp_html);

		}

		var aa = 0;
		var bb = 0;
		var cc = 0;

		function yj(x) {
			aa = x;
		}

		function ej(x) {
			bb = x;
		}

		function sj(x) {
			cc = x;
		}

		function tianjia() {

			var lb = document.getElementById("leibie")
			var ajx = new XMLHttpRequest;

			if(aa == 0 && lb.value != "") {
				ajx.open("GET", "http://localhost:16111/goods/inseleibie?name=" + lb.value + "&category_parent_ID=" + aa, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//confirm("添加成功");

							location.reload();
						}
					}
				}
			} else if(bb != 0 && cc == 0 && lb.value != "") {

				ajx.open("GET", "http://localhost:16111/goods/inseleibie?name=" + lb.value + "&category_parent_ID=" + bb, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//confirm("添加成功");

							location.reload();
						}
					}
				}
			} else if(aa != 0 && lb.value != "") {

				ajx.open("GET", "http://localhost:16111/goods/inseleibie?name=" + lb.value + "&category_parent_ID=" + aa, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//	confirm("添加成功");

							location.reload();
						}
					}
				}
			} else {

				confirm("格式错误！");

			}
		}

		function xiugai() {

			var lr = document.getElementById("neirong")
			var ajx = new XMLHttpRequest;

			if(aa != 0 && bb != 0 && cc != 0 && lr.value != "") {

				ajx.open("GET", "http://localhost:16111/goods/updaleibie?name=" + lr.value + "&id=" + cc, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//confirm("修改成功");
							location.reload();
						}
					}

				}

			} else if(bb != 0 && lr.value != "") {

				ajx.open("GET", "http://localhost:16111/goods/updaleibie?name=" + lr.value + "&id=" + bb, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//confirm("修改成功");
							location.reload();
						}
					}

				}

			} else if(aa != 0 && lr.value != "") {

				ajx.open("GET", "http://localhost:16111/goods/updaleibie?name=" + lr.value + "&id=" + aa, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							//confirm("修改成功");
							location.reload();
						}
					}

				}

			} else {

				confirm("格式错误");

			}
		}

		function shanchu() {
			var ajx = new XMLHttpRequest;
			if(aa != 0 && bb != 0 && cc != 0) {

				ajx.open("GET", "http://localhost:16111/goods/deleleibie?id=" + cc, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							confirm("删除成功");
							location.reload();
						}
					}

				}

			} else if(bb != 0) {

				ajx.open("GET", "http://localhost:16111/goods/deleleibie?id=" + bb, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							confirm("删除成功");
							location.reload();
						}
					}

				}

			} else if(aa != 0) {

				ajx.open("GET", "http://localhost:16111/goods/deleleibie?id=" + aa, true);
				ajx.send(null);
				ajx.onreadystatechange = function() {

					if(ajx.status == 200 && ajx.readyState == 4) {
						var x = ajx.responseText;
						if(x != null) {
							confirm("删除成功");
							location.reload();
						}
					}

				}

			} else {

				confirm("操作错误");

			}
		}

		function tianjiaattribute() {

			$.ajax({
				type: "get",
				url: "http://127.0.0.1:16111/goods/addattribute",
				async: true,
				data: {
					category_id: cc,
					attribute: $("#attribute").val(),
					attibutedetails: $("#attibutedetails").val()
				},
				success: function(data) {
					location.reload();
				}
			});

		}

		function tianjiaconfig() {
			$.ajax({
				type: "get",
				url: "http://127.0.0.1:16111/goods/addcategoryconfig",
				async: true,
				data: {
					configname: $("#configname").val(),
					category_id: cc,
					configdetails: $("#configdetails").val()
				},
				success: function(data) {
					location.reload();
				}
			});
		}
	</script>

</html>